import { onUnmounted, ref, watch } from 'vue'

/**
 * 自定义hook函数，用于使用localStorage或sessionStorage
 * @param {string} key - 存储的键名
 * @param {*} defaultVal - 默认值
 * @param {string} storage - 存储类型，可选值为 'localStorage' 或 'sessionStorage'
 * @return {object} - 响应式对象，包含value、setValue属性
 */
export function useLocalStorage(key, defaultVal, storage) {
  const storageType = storage === `localStorage` ? localStorage : sessionStorage

  const value = ref(JSON.parse(storageType.getItem(key)) || defaultVal)

  /**
   * 更新value的值，并将新的值存储到localStorage或sessionStorage中
   * @param {*} newVal - 新的值
   */
  const setValue = (newVal) => {
    storageType.setItem(key, JSON.stringify(newVal))
    value.value = newVal
  }

  /**
   * 监听value的变化，即时将value的值存储到localStorage或sessionStorage中
   */
  const stopWatch = watch(
    () => JSON.stringify(value.value),
    () => {
      storageType.setItem(key, JSON.stringify(value.value))
    },
    { immediate: true }
  )

  onUnmounted(stopWatch)

  /**
   * 清除存储在 localStorage 或 sessionStorage 中的值
   */
  const clearValue = () => {
    storageType.removeItem(key)
    value.value = defaultVal
  }

  return {
    value,
    setValue,
    clearValue,
  }
}
